<template>
  <body>
  <div class="background">
    <img src="static/背景2.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="书籍详情" style="margin-top: -2%">
  </el-page-header>
  <div>
    <div class="img">
      <H2>{{book.bookName}}</H2>
      <img :src="'https://images.weserv.nl/?url='+book.img" onerror="this.src='static/error.jpg'"
           style="width: 100%;height: 100%;">
    </div>
    <div class="info">
      <div style="text-align: left;font-size: 20px">
        <span class="pl">作者: </span>{{book.author}}<br>
        <span class="pl">类型: </span>{{type[book.typeId]}}<br>
        <span class="pl">出版社: </span>{{book.publisher}}<br>
        <span class="pl">定价: </span>{{book.price}}元<br>
      </div>
      <div style="text-align: left;margin-top: 2%;font-size: 20px">数量:
        <el-input-number v-model="counter" :min="1" :max="999" title="请输入数量!"></el-input-number>
        本
      </div>
      <div style="text-align: left;margin-top: 3%">
        <el-button type="primary" @click.native.prevent="buy" style="font-size: 18px">立即购买</el-button>
        <el-button @click.native.prevent="car" style="font-size: 18px">加入购物车</el-button>
      </div>
    </div>
    <div class="summary">
      <h2>简介</h2>
      <p style="font-size: 25px;">{{book.summary}}</p>
    </div>
    <dialog-component1
      v-if="showDialog"
      ref="dialogComponent1"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
    ></dialog-component1>
  </div>
  </body>
</template>

<script>
  import DialogComponent1 from "./DialogComponent1";

  export default {
    name: "Commodity",
    components: {DialogComponent1},
    data() {
      return {
        book: {
          bookId: '',
          typeId: '',
          img: '',
          bookName: '',
          author: '',
          publisher: '',
          price: '',
          summary: '',
          bnumber: ''
        },
        type: {
          1: '历史',
          2: '小说',
          3: '地理',
          4: '传记',
          5: '哲学',
          6: '社会学',
          7: '艺术',
          8: '政治',
          9: '建筑',
          10: '戏剧',
          11: '音乐',
          12: '军事',
          13: '数学',
          14: '美术',
          15: '设计',
          16: '佛教'
        },
        browse: {
          browseId: '',
          customerId: '',
          bookName: '',
          price: '',
          date: ''
        },
        counter: 1,
        num: '',
        showDialog: false,
        dialogTitle: "发票信息",
        tableItem: {
          customerId: '',
          bookId: '',
          bookName: '',
          price: '',
          orderNumber: '',
          money: '',
          date: '',
          address: '',
          phoneNumber: '',
          deliveryId: '',
          bnumber: ''
        },
      }
    },
    created() {
      this.book = this.$route.query.book;
      let id = this.$store.state.customerId;
      if (id != null && id != '') {
        this.browse.bookName = this.book.bookName;
        this.browse.price = this.book.price;
        this.browse.date = this.addDate();
        this.browse.customerId = id;
        this.$axios.post('/user/browse', this.browse);
      }
    },
    methods: {
      addDate() {
        let nowDate = new Date();
        let date1 = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        };
        if (date1.month >= 1 && date1.month <= 9) {
          date1.month = "0" + date1.month;
        }
        if (date1.date >= 0 && date1.date <= 9) {
          date1.date = "0" + date1.date;
        }
        let systemDate = date1.year + '-' + date1.month + '-' + date1.date;
        return systemDate;
      },
      goBack() {
        this.$router.go(-1);
      },
      buy() {
        let id = this.$store.state.customerId;
        if (id == null || id == '') {
          this.$confirm('请登录账号!', '提示', {}).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$message({
              message: '取消购买',
              type: 'failed'
            })
          });
        } else {
          let _this = this;
          _this.tableItem.customerId = id;
          _this.tableItem.bookId = _this.book.bookId;
          _this.tableItem.bookName = _this.book.bookName;
          _this.tableItem.price = _this.book.price;
          _this.tableItem.orderNumber = _this.counter;
          _this.tableItem.money = _this.counter * _this.book.price;
          _this.tableItem.date = _this.addDate();
          _this.tableItem.bnumber = _this.book.bnumber;
          _this.showDialog = true;
          _this.$nextTick(() => {
            _this.$refs["dialogComponent1"].showDialog = true;
          });
        }
      },
      closeDialog(flag) {
        if (!flag) {
          this.$message({
            message: '取消购买',
            type: 'failed'
          })
        }
        this.showDialog = false;
      },
      car() {
        let id = this.$store.state.customerId;
        if (id == null || id == '') {
          this.$confirm('请登录账号!', '提示', {}).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$message({
              message: '取消加入购物车',
              type: 'failed'
            })
          });
        } else {
          let _this = this;
          if (_this.book.bnumber < _this.counter) {
            this.$alert("库存不足!", '提示', {
              confirmButtonText: '确定'
            });
          } else {
            var list = {
              CustomerId: id,
              BookId: _this.book.bookId,
              OrderNumber: _this.counter,
              Money: _this.counter * _this.book.price
            };
            _this.$confirm('是否加入购物车?', '提示', {}).then(() => {
              _this.$axios
                .post('/money/shop', list)
                .then(resp => {
                  this.$alert("成功加入购物车!", '提示', {
                    confirmButtonText: '确定'
                  });
                })
            }).catch(() => {
              this.$message({
                message: '取消加入购物车',
                type: 'failed'
              })
            });
          }
        }
      }
    }
  }
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .img {
    width: 400px;
    height: 400px;
    margin-top: 5%;
    margin-left: 15%;
  }

  .info {
    width: 400px;
    height: 400px;
    margin-top: -15%;
    margin-left: 40%;
  }

  .summary {
    width: 400px;
    height: 400px;
    margin-top: -25%;
    margin-left: 60%;
    text-align: left;
  }
</style>
